<template>
	<view class="select click_true">
		<view class="bg" :class="[props.show?'click_false':'click_true']" @click="closeFun"></view>
		<view class="selectS click_false" :class="{'show':props.show}">
			<picker-view class="picker-view" indicator-style="height: 120px;" :value="props.value" @change="changeFun"
				immediate-change>
				<picker-view-column>
					<view class="item dis_f_c_c" v-for="(item,index) in props.list" :key="index">
						<view class="itemS dis_f_c_c">
							<view class="name dis_f_c_c">
								<text class="slhOne">{{item[props.label]}}</text>
							</view>
							<view class="image box" v-if="item.img">
								<image :src="item.img" mode="aspectFill" @click="lookImgFun(item)"></image>
							</view>
						</view>
					</view>
				</picker-view-column>
			</picker-view>
			<view class="btns dis_f_c_c">
				<view class="btn dis_f_c_c hyy left" @click="closeFun">
					<text>取消</text>
				</view>
				<view class="btn dis_f_c_c hyy right" @click="selectFun">
					<text>确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		getCurrentInstance,
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		label: {
			type: String,
			default: "name"
		},
		list: {
			type: Array,
			default: []
		},
		value: {
			type: Array,
			default: []
		}
	})
	const emit = defineEmits(["change", "close", "select"])
	// 选中项改变触发
	function changeFun(e) {
		emit("change", e.detail.value);
	}
	// 关闭选择栏
	function closeFun() {
		emit("close");
	}
	// 点击确定触发
	function selectFun() {
		emit("select");
	}

	function lookImgFun(item) {
		$js.lookImg(item.img, item.imgs);
	}
</script>

<style lang="scss" scoped>
	.select {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999999999;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			transition: background 0.4s;

			&.click_false {
				background: rgba(0, 0, 0, 0.1);
			}
		}

		.selectS {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background: #fff;
			border-radius: 10rpx 10rpx 0 0;
			z-index: 2;
			transform: translateY(100%);
			transition: transform 0.4s;

			&.show {
				transform: translateY(0);
			}

			.picker-view {
				width: 750rpx;
				height: 750rpx;
				margin-top: 20rpx;
			}

			.item {
				height: 100rpx;

				.itemS {
					height: 100%;

					.name {
						width: 260rpx;
					}

					.image {
						top: 0;
						right: -110px;
						width: 110px;
						height: 110px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.btns {
				padding: 30rpx;

				.btn {
					margin: 0 20rpx;
					width: 200rpx;
					height: 80rpx;
					border-radius: 16rpx;
				}

				.left {
					color: #000;
					background: #f0f0f0;
				}

				.right {
					color: #fff;
					background: #49c265;
				}
			}
		}
	}
</style>